<script>
import ContentFileld from "@/components/ContentFileld.vue";
import {useStore} from "vuex";
import {ref} from "vue";
import router from "@/router";

export default {
    name: "LoginIndex",
    components: {
        ContentFileld,
    },

    setup() {
        const store = useStore();
        let username = ref("");
        let password = ref("");
        let error_message = ref("");
        const login = () => {
            error_message.value = "";
            store.dispatch("login", {
                username: username.value,
                password: password.value,
                success() {
                    // console.log(resp);
                    store.dispatch("getinfo",{
                        success(){
                            localStorage.setItem("jwt_token",store.state.user.token);
                            // console.log(resp);
                            router.push({name:"home"});
                            // console.log(store.state.user.username);
                        }
                    })
                },
                error() {
                    error_message.value="用户名或密码错误";
                }
            })
        }
        return {
            username, password, error_message, login
        }
    }
};

</script>

<template>
    <ContentFileld>
        <div class="row">
            <div class="col"></div>
            <div class="col">
                <form @submit.prevent="login">
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Username</label>
                        <input v-model="username" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    </div>
                    <div class="mb-3">
                        <label for="exampleInputPassword1" class="form-label">Password</label>
                        <input v-model="password" type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <div class="error_message">{{error_message}}</div>
                    <button type="submit" class="btn btn-primary w-100">Submit</button>
                </form>
            </div>
            <div class="col"></div>
        </div>

    </ContentFileld>
</template>

<style scoped>
.error_message {
    color: red;
}

</style>